<template>
  <div class="login">
    <div class="login-box">
      <h2>UNI-ADMIN</h2>
      <el-form
        class="box"
        label-width="80px"
        :model="form"
      >
        <el-form-item label="账号">
          <el-input
            v-model="form.name"
            placeholder="请输入账号"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="form.pass"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>
          <el-button type="primary" @click="login" class="btn">立即登录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: "",
        pass: "",
      },
    };
  },
  methods:{
    // 登录
login(){
  this.$axios.post("http://ceshi5.dishait.cn/admin/login",{
    username:this.form.name,
    password:this.form.pass,
  }).then((res)=>{
    localStorage.setItem("token",res.data.data.token);
    this.$router.push({path:"/home"})
  }).catch((res)=>{
    alert("账号密码错误")
  })
}
  }
};
</script>
<style  scoped>
.login {
  width: 1520px;
  height: 600px;
  margin: 0 auto;
  padding-top: 0.1px;
}
.login-box {
  width: 420px;
  height: 260px;
  margin: 0 auto;
  background: lightyellow;
  margin-top: 160px;
  padding-top: 0.1px;

}
.box {
  width: 380px;
  height: 200px;
}
h2{
  text-align: center;
  margin-top: 20px;
}
.btn{
  margin-left: 40px;
}
</style>